<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>{:$configs['SYSTEM_NAME']}</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/bootstrap.min.css">
<!--引入下拉插件css-->
<link href="__STATIC__/common/select2/select2.css" rel="stylesheet">
<!--日期选择器css-->
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<!--时间日期选择器css-->
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<!--表格插件css-->
<link rel="stylesheet" href="__STATIC__/admin/js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/style.min.css">

<link rel="stylesheet" type="text/css" href="__STATIC__/common/cch.css">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div class="card-search mb-2-5">
            <form class="search-form" method="get" action="{:url('index')}" >
              
              {include file="html/search" /}
              
            </form>
          </div>
          <!-- <div class="card-btns mb-2-5">
            <a class="btn btn-primary me-1 search_btn" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
          </div> -->
          <div class="table-responsive">
            <div id="toolbar" class="toolbar-btn-action">
              <button type="button" class="btn btn-primary me-1 search_btn">
                <span class="mdi mdi-magnify" aria-hidden="true"></span>新增
              </button>
              <!-- <button id="btn_edit" type="button" class="btn btn-success me-1">
                <span class="mdi mdi-check" aria-hidden="true"></span>启用
              </button>
              <button id="btn_edit" type="button" class="btn btn-warning me-1">
                <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
              </button>
              <button id="btn_delete" type="button" class="btn btn-danger">
                <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
              </button> -->
            </div>
            <table id="table"></table>
          </div>

          
          
        </div>
      </div>
    </div>
        
  </div>
  
</div>


<script type="text/javascript" src="__STATIC__/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/popper.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/main.min.js"></script>
<!--表格插件js-->
<script src="__STATIC__/admin/js/bootstrap-table/bootstrap-table.js"></script>
<script src="__STATIC__/admin/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--引入下拉插件js-->
<script src="__STATIC__/common/select2/select2.min.js"></script>
<!--日期选择器js-->
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--时间日期选择器js-->
<script type="text/javascript" src="__STATIC__/admin/js/momentjs/moment.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/momentjs/locale/zh-cn.min.js"></script>
<!--自定义扩展-->
<script type="text/javascript" src="__STATIC__/common/cch.js"></script>
</body>
<script>
  /**
   * 分页相关的配置
   **/
  const pagination = {
    // 分页方式：[client] 客户端分页，[server] 服务端分页
    sidePagination: "server",
    // 初始化加载第一页，默认第一页
    pageNumber: 1,
    // 每页的记录行数
    pageSize: 10,
    // 可供选择的每页的行数 - (亲测大于1000存在渲染问题)
    pageList: [5, 10, 25, 50, 100],
    // 在上百页的情况下体验较好 - 能够显示首尾页
    paginationLoop: true,
    // 展示首尾页的最小页数
    paginationPagesBySide: 2
  };
  
  /**
   * 按钮相关配置
   **/
  const button = {
    // 按钮的类
    buttonsClass: 'default',
    // 类名前缀
    buttonsPrefix: 'btn'
  }
  
  /**
   * 图标相关配置
   **/
  const icon = {
    // 图标前缀
    iconsPrefix: 'mdi',
    // 图标大小
    iconSize: 'mini',
    // 图标的设置
    icons: {
      paginationSwitchDown: 'mdi-door-closed',
      paginationSwitchUp: 'mdi-door-open',
      refresh: 'mdi-refresh',
      toggleOff: 'mdi-toggle-switch-off',
      toggleOn: 'mdi-toggle-switch',
      columns: 'mdi-table-column-remove',
      detailOpen: 'mdi-plus',
      detailClose: 'mdi-minus',
      fullscreen: 'mdi-monitor-screenshot',
      search: 'mdi-table-search',
      clearSearch: 'mdi-trash-can-outline'
    }
  };
  
  /**
   * 表格相关的配置
   **/
  const table = {
    classes: 'table table-bordered table-hover table-striped lyear-table',
    // 请求地址
    url: '{:$data_url}',
    // 唯一ID字段
    uniqueId: 'id',
    // 每行的唯一标识字段
    idField: 'id',
    // 是否启用点击选中行
    clickToSelect: true,
    // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
    // showToggle: true,
    // 请求得到的数据类型
    dataType: 'jsonp',
    // 请求方法
    method: 'get',
    // 工具按钮容器
    toolbar: '#toolbar',
    // 是否分页
    pagination: true,
    // 是否显示所有的列
    showColumns: true,
    // 是否显示刷新按钮
    showRefresh: true,
    // 显示图标
    showButtonIcons: true,
    // 显示文本
    showButtonText: false,
    // 显示全屏
    showFullscreen: true,
    // 开关控制分页
    showPaginationSwitch: true,
    // 总数字段
    totalField: 'total',
    // 当字段为 undefined 显示
    undefinedText: '-',
    // 排序方式
    sortOrder: "asc",
    ...icon,
    ...pagination,
    ...button
  };
  
  /**
   * 用于演示的列信息
   **/
  const columns = [{
    field: 'ctime',
    title: '时间',
    // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
    // h表示横向，v标识垂直
    align: 'center',
    // 是否作为排序列
    sortable: true,
    // 当列名称与实际名称不一致时可用
    // sortName: 'sortId',
    switchable: false,
    // 列的宽度
    // width: 8,
    // 宽度单位
    // widthUnit: 'rem'
  }, {
    field: 'team_name',
    align: 'center',
    title: '团队'
  },{
    field: 'sale_name',
    align: 'center',
    title: '销售'
  }, {
    field: 'customer_num',
    title: '新增客户',
    align: 'center',
    sortable: true,
  }, {
    field: 'contact_num',
    title: '跟进次数',
    align: 'center',
    sortable: true,
  }, {
    field: 'hjzx_num',
    title: '呼叫次数',
    align: 'center',
    sortable: true,
  }, {
    field: 'hjzx_success',
    title: '接通次数',
    align: 'center',
    sortable: true,
  }, {
    field: 'hjzx_ratio',
    align: 'center',
    title: '接通率',
  }, {
    field: 'hjzx_bill',
    title: '呼叫时长',
    align: 'center',
    sortable: true,
  }];
    
  
  $('table').bootstrapTable({
    ...table,
    // 自定义的查询参数
    queryParams: function (params) {
      return {
        // 每页数据量
        limit: params.limit,
        // sql语句起始索引
        offset: params.offset,
        page: (params.offset / params.limit) + 1,
        // 排序的列名
        sort: params.sort,
        // 排序方式 'asc' 'desc'
        sortOrder: params.order
      };
    },
    columns,
        onLoadSuccess: function(data){
            $("[data-bs-toggle='tooltip']").tooltip();
        }
  });
</script>
</html>